
<template>
	<view class="content">
		<!-- 背景单独领出来写 -->
      <view class="bg">
      </view>
	  	<image class="img-logo" src="/static/images/10.jpg" mode=""></image>
		<view class="input-area">
			<image src="/static/images/user.png" mode=""></image>
			<input type="text" placeholder="用户名/手机号" />
		</view>
		<view class="input-area-pwd">
			<image src="/static/images/mima.png" mode=""></image>
			<input :type="pwd_type" placeholder="密码" />
			<image
				@click="pwd_visible = !pwd_visible"
				:src="pwd_icon"
				mode=""
			></image>
		</view>
		<view class="btn-login" hover-class="active">登录</view>
		<view class="accout-area">
			<view hover-class="active">忘记密码?</view>
			<view hover-class="active">立即注册</view>
		</view>
		<view class="bottom">
			<view>
				<view class="line"></view>
				<view>第三方直接登录</view>
				<view class="line"></view>
			</view>
			<view>
				<view hover-class="active">
					<image src="/static/images/qq.jpg" mode=""></image>
				</view>
				<view hover-class="active">
					<image src="/static/images/wx.jpg" mode=""></image>
				</view>
				<view hover-class="active">
					<image src="/static/images/wb.jpg" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pwd_visible: false  //密码可见性
			}                                                                                                  
		},
		methods:{},
		computed:{
			// 计算属性特有特性  可以用来判断简单计算 进行比较
			pwd_type(){
				return this.pwd_visible?'text':'password';
			},
			pwd_icon(){
				return this.pwd_visible?'/static/images/eye.png':'/static/images/eye-close.png';
			}
			
		}
	}
</script>

<style scoped lang="scss">
.content{
padding: 80rpx;
	display: flex;
	// 主轴竖向排列
	flex-direction: column;
	// 交叉轴拉伸充满
	align-items: stretch;
}
.bg{		
		background-image: url(/static/images/bg.jpg);
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
		// 用百分比 就需要给定位 告诉它位置
		position: fixed;
		left: 0;
		top: 0;
		// 模糊滤镜
		filter: blur(6px);
		// 层级: 背景图应该在最底层
		z-index: -1;		
}
.bottom{
	// 最下面的公告样式
	position: fixed;
    bottom: 150rpx;
	left: 0;
	right: 0;
	padding: 0 100rpx;
	// 第一个view公共样式
	>view:first-child{
		color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
		// 白线的样式
		>.line{
			height: 1px;
			background-color: white;
			width: 140rpx;
		}
	}
	// 下面图标样式
	>view:last-child{
		display: flex;
		justify-content: space-around;
		>view{
			padding: 10rpx;
			background-color: white;
			border-radius: 50%;
			overflow: hidden;
		}
		image{
			width: 80rpx;
			height: 80rpx;
		}
	}
}
// 忘记密码行样式
.accout-area{
	margin-top: 30rpx;
	display: flex;
    justify-content: space-between;
	
	view{
		color: gray;
		text-decoration: underline;
	}
}
.active{
	opacity: 0.6;
}
.img-logo{
	background-color: white;
	border-radius: 7rpx;
	width: 420rpx;
	height: 102rpx;
	// 指定弹性容器内所选项目的对齐方式
	align-self: center;
    padding: 10rpx;
	margin-top: 60rpx;
}
// 手机框
.input-area{
	background-color: white;
	border-radius: 6rpx;
	display: flex;
	align-items: center;
	margin-top: 100rpx;
	>image{
		width: 40rpx;
		height: 40rpx;
		margin: 20rpx;
	}
	>input{
		// 代表自动缩放，放大充满剩余空间
		flex: 1;
		margin-right: 20rpx;
	}
}
// 密码框
.input-area-pwd{
	background-color: white;
	border-radius: 6rpx;
	display: flex;
	align-items: center;
	margin-top: 40rpx;
	>image{
		width: 40rpx;
		height: 40rpx;
		margin: 20rpx;
	}
	>input{
		flex: 1;
		margin-right: 20rpx;
		
	}
}
.btn-login{
	background-color: rgb(255,165,8);
	color: white;
	padding: 20rpx;
	border-radius: 8rpx;
	text-align: center;
	margin-top: 40rpx;
}
</style>